<template>
  <div class="card">
    <div class="top">
      <div class="left">
        <img :src="MovieCardData[index].image" alt="" />
      </div>
      <div class="right">
        <van-swipe indicator-color="white">
          <van-swipe-item v-for="i in MovieCardData[index].swipe" :key="i">
            <img :src="i" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
    <div class="main">
      <div class="title">
        <div class="name">
          {{ MovieCardData[index].name }}({{ MovieCardData[index].year }})
          <span @click="changeIcon()"
            ><svg class="icon" aria-hidden="true">
              <use :xlink:href="icon"></use></svg
          ></span>
          <div class="score">
            {{MovieCardData[index].score}}
          </div>
          <van-rate
            readonly
            size="16"
            color="rgb(255,210,30)"
            :allow-half="true"
            v-model="MovieCardData[index].hscore"
          />
          
        </div>
        <div class="detail">
          <span>{{ MovieCardData[index].small_tags }}</span>
        </div>
      </div>
      <div class="comment">
        {{ MovieCardData[index].comments[num].content
        }}<span>——{{ MovieCardData[index].comments[num].user }}</span>
      </div>
    </div>
    <div class="tag">
      <van-cell
        v-for="i in MovieCardData[index].big_tags"
        :key="i"
        :title="i"
        is-link
      />
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/reactivity";
export default {
  name: "MovieCard",
  props: {
    MovieCardData: Array,
    index: Number,
  },
  setup(props) {
    let data = reactive({
      icon: "#icon-xiangkan",
      i: 0,
    });
    const changeIcon = () => {
      data.i++;
      if (data.i % 2) {
        data.icon = "#icon-xiangkanyixuan";
      } else {
        data.icon = "#icon-xiangkan";
      }
    };
    // 随机数
    const num = Math.ceil(Math.random() * 10) % 3;
    return {
      ...toRefs(data),
      changeIcon,
      num,
    };
  },
};
</script>

<style lang="less" scoped>
.card {
  height: 400px;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  flex-flow: column;
  .top {
    display: flex;
    justify-content: space-around;
    height: 160px;
    .left {
      width: 100px;
      img {
        width: 100px;
        height: 160px;
        border-radius: 5px;
      }
    }
    .right {
      width: 220px;
      background-color: #996;
      border-radius: 5px;

      img {
        width: 220px;
        height: 160px;
        border-radius: 5px;
      }
    }
  }
  .main {
    height: 130px;
    display: flex;
    flex-flow: column;
    padding-top: 10px;
    .title {
      .name {
        font-weight: 600;
        height: 40px;
        position: relative;
        .icon {
          width: 20px;
          height: 20px;
          color: rgb(255, 210, 30);
          position: absolute;
          top: 5px;
        }
        .van-rate {
          position: absolute;
          right: 0;
          top: 10px;
        }
        .score {
          position: absolute;
          right:0;
          color: rgba(255, 210, 30, 0.788);
        }
        
      }
      .detail {
        font-size: 14px;
        width: 260px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        height: 30px;
        span {
          color: #888;
        }
      }
    }
    .comment {
      font-size: 16px;
      border-bottom: 1px solid #888;
      padding-bottom: 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-wrap: break-word;
      span {
        color: #999;
      }
    }
  }
  .tag {
    height: 140px;
  }
}
</style>